<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        table {
            width: 80%;
            border: 1px solid black;
            border-collapse: collapse;
            margin: 0 auto;
        }

        th ,td {
            border: 1px solid black;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
<body>
<h3>学生信息表</h3>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>分数</th>
        </tr>
    </thead>
    <tbody id="tbd">

    </tbody>
</table>

<script>

    // 获取学生信息   ajax  http    /student/list
    var  students = [
        {
            id: 1,
            name: 'zhangsan',
            age:20,
            score:80
        },
        {
            id: 2,
            name: 'lisi',
            age:22,
            score:70
        },
        {
            id: 3,
            name: 'wangwu',
            age:21,
            score:60
        },
        {
            id: 4,
            name: 'zhaoliu',
            age:20,
            score:80
        }

    ]

    // 获取父节点  tbody
    var tbd = document.getElementById('tbd');
    students.forEach(student=>{
        var tr = document.createElement('tr');
        // 创建 td  遍历对象属性
        for (var key in student) {
            var  td = document.createElement('td')
            td.innerText = student[key]    //  访问对象中的属性值    对象.属性名  对象[属性名]
            tr.appendChild(td)
        }

        //  tr  -> tbd
        tbd.appendChild(tr)
    })

</script>
</body>
</html>